Skip to content

feat: modernize Switch to MD3#4957

Open
adrcotfas wants to merge 3 commits into
mainfrom
@adrcotfas/switch
Open

feat: modernize Switch to MD3#4957
adrcotfas wants to merge 3 commits into
mainfrom
@adrcotfas/switch

Conversation

@adrcotfas
Copy link
Copy Markdown
Collaborator

@adrcotfas adrcotfas commented May 20, 2026

Motivation

Update the Switch to use the latest MD specs, including motion and RTL.

Related issue

Closes #4939
Partially closes #4892

Test plan

  • lint, existing tests and new tests pass
  • manual testing on Android, iOS and web in all states, including hovered and focused

Demo

Screen_recording_20260520_171630.webm
Simulator.Screen.Recording.-.iPhone.16e.-.2026-05-20.at.17.46.36.mov

@github-actions
Copy link
Copy Markdown

The mobile version of example app from this branch is ready! You can see it here.

Comment thread src/components/Switch/Switch.tsx
Comment thread src/components/Switch/Switch.tsx Outdated
Comment thread src/index.tsx Outdated
Comment thread src/components/Switch/Switch.tsx Outdated
Comment thread src/components/Switch/Switch.tsx Outdated
Comment thread src/components/Switch/utils.ts Outdated
Comment thread src/components/__tests__/Switch.test.tsx Outdated
@adrcotfas adrcotfas force-pushed the @adrcotfas/tokens_structure branch from 91d86b4 to be1c417 Compare May 25, 2026 06:21
@adrcotfas adrcotfas added the v6 label May 25, 2026
@adrcotfas adrcotfas force-pushed the @adrcotfas/tokens_structure branch from be1c417 to b41006a Compare May 25, 2026 06:30
@adrcotfas adrcotfas force-pushed the @adrcotfas/switch branch from 562f947 to 7731d0e Compare May 25, 2026 09:11
@adrcotfas adrcotfas requested a review from satya164 May 25, 2026 09:11
@adrcotfas adrcotfas force-pushed the @adrcotfas/tokens_structure branch from b41006a to f675baf Compare May 26, 2026 12:06
Base automatically changed from @adrcotfas/tokens_structure to main May 26, 2026 12:14
@adrcotfas adrcotfas force-pushed the @adrcotfas/switch branch from 7731d0e to 9e41a0b Compare May 26, 2026 13:16
@adrcotfas
Copy link
Copy Markdown
Collaborator Author

@satya164 Findings were fixed. I discovered an issue with the dynamic theme when testing custom switch colors and applied a fix as a separate commit.

Copy link
Copy Markdown
Member

@satya164 satya164 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quickly clicking on the Switch feels bad, probably because the Switch grows and changes position unanimated before the animation is visible

CleanShot.2026-05-26.at.17.00.57-optimised.mp4

RTL seems to be broken on Web

CleanShot.2026-05-26.at.16.39.44-optimised.mp4

I've merged some updates to main which should let you toggle RTL on Web for testing

Comment thread src/components/Switch/Switch.tsx Outdated
Comment thread src/components/Switch/Switch.tsx Outdated
Comment thread src/components/Switch/SwitchStyle.web.tsx Outdated
Comment thread src/components/Switch/SwitchStyle.web.tsx Outdated
Comment thread src/components/Switch/SwitchFocusRing.tsx Outdated
@adrcotfas adrcotfas force-pushed the @adrcotfas/switch branch from 9e41a0b to ff68912 Compare May 27, 2026 08:42
@adrcotfas
Copy link
Copy Markdown
Collaborator Author

Quickly clicking on the Switch feels bad, probably because the Switch grows and changes position unanimated before the animation is visible

It should be fine now.

RTL seems to be broken on Web

Fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

refactor(switch): align interaction model with MD3 guidelines fix(iOS): Enforce Material Design Consistency

2 participants